<template>
  <div class="yichang">
    <el-carousel
      :interval="5000"
      indicator-position="none"
      style="position: relative"
      @change="Sendindex"
    >
      <div v-if="this.photoDatas.length == 0">
        <el-carousel-item>
          <h3>暂未检测到异常画面</h3>
        </el-carousel-item>
      </div>
      <div v-else>
        <el-carousel-item v-for="(photoData, id) in photoDatas" :key="id">
          <div class="photo-title">
            <el-button
              type="text"
              icon="el-icon-location-outline"
              class="photo-button"
            ></el-button
            ><el-button
              type="text"
              icon="el-icon-camera"
              class="photo-button"
            ></el-button
            ><el-button
              type="text"
              icon="el-icon-refresh-left"
              class="photo-button"
            ></el-button
            ><el-button
              type="text"
              icon="el-icon-more"
              class="photo-button"
              style="margin-right: 10px"
            ></el-button>
          </div>
          <div style="position: absolute; z-index: 1">
            <el-image
              class="tupian"
              :src="
                'http://szls.chiefdata.net/profile/' +
                photoData.tempFileName
              "
              fit="fill"
            ></el-image>
          </div>
        </el-carousel-item></div
    ></el-carousel>
  </div>
</template>
 <script>
export default {
  data() {
    return {
      photoDatas: [],

      index: 0,
    };
  },
  mounted() {
    this.getData();
    setInterval(() => {
      this.getData(); // 修改数据date
    }, 5000);
  },
  methods: {
    Sendindex(index1, index2) {
      this.$emit("getPhotoData", index1);
    },
    leave() {
      this.isShow = false;
    },
    spl(str) {
      return str.trim().split(" ")[1] + "     " + str.trim().split(" ")[0];
    },
    getImgUrl(src) {
      try {
        return "http://szls.chiefdata.net/profile/" + src;
      } catch (e) {
        return "@/assets/logo.png";
      }
    },
    getData() {
      this.$http
        .get(
          "http://szls.chiefdata.net/server/recognitionFile/getcamerarelist",
          {
            params: {
              pageNo: 1,
              pageSize: 5,
            },
          }
        )
        .then(
          (response) => {
            this.photoDatas = response.body.obj.records;
          },
          (response) => {
            console.log("请求失败");
          }
        );
    },
  },
};
</script>
<style lang="less" scoped>
.el-carousel__item h3 {
  color: #ffffff;
  font-size: 18px;
  opacity: 0.75;
  line-height: 165px;
}

.el-carousel__item {
  background-color: #142766;
}

/deep/.el-carousel__container {
  position: relative;
  height: 194px;
}
.photo-title {
  z-index: 8;
  position: absolute;
  background-color: rgba(3, 7, 20, 0.5);
  color: #ffffff;
  height: 30px;
  width: 100%;
  font-size: 10px;
  padding-top: 7px;
  text-align: right;
  padding-left: 20px;
}
/deep/.photo-button {
  color: #ffffff;
  padding: 0px;
}
.yichang {
  background-color: #142766;
}
.tupain {
  width: 100%;
  height: 194px;
}
</style>
